<script setup lang="ts">
import { computed, onBeforeMount, onMounted, provide, ref, watch } from 'vue';
import { useData, useRoute } from 'vitepress';
import { useSidebar, useCloseSidebarOnEscape } from './composables/sidebar.js';
import VPSkipLink from './components/VPSkipLink.vue';
import VPBackdrop from './components/VPBackdrop.vue';
import VPNav from './components/VPNav.vue';
import VPLocalNav from './components/VPLocalNav.vue';
import VPSidebar from './components/VPSidebar.vue';
import VPContent from './components/VPContent.vue';
import VPFooter from './components/VPFooter.vue';
import { APPEARANCE_KEY } from './shared/shared.js';
import { animateFunc, changeHeader, changeFeatureCls, changePageHeaderFixedState, resizeWindow } from './composables/scrollIFunc.js';
import { throttleAndDebounce } from './support/utils.js';

const { isOpen: isSidebarOpen, open: openSidebar, close: closeSidebar } = useSidebar();

const route = useRoute();
watch(() => route.path, closeSidebar);

useCloseSidebarOnEscape(isSidebarOpen, closeSidebar);

provide('close-sidebar', closeSidebar);
/**主题设置 */
let tTheme = typeof localStorage !== 'undefined' ? localStorage.getItem(APPEARANCE_KEY) || 'auto' : 'auto';
// 当前主题
const curTheme = ref(tTheme);
// 当前窗口尺寸
const curSize = ref('xl');
const changeTheme = (cur) => {
    console.log(cur);
    curTheme.value = cur;
};
const isLargeSize=computed(()=>{
    return ['ex','el','xl','lg'].findIndex((item)=>item==curSize.value)>-1;
});
// 当前主题 黑、白
provide('current-theme', curTheme);
// 当前屏幕尺寸
provide('current-size', curSize);
// 是否是大屏幕
provide('is-large',isLargeSize);
// 改变当前主题的方法
provide('change-theme', changeTheme);

onBeforeMount(() => {
    //滚动时
    window.addEventListener(
        'scroll',
        throttleAndDebounce(() => {
            // 中间内容区域
            changeFeatureCls(isLargeSize.value);
            // 顶部导航
            changePageHeaderFixedState();
            // 追加动画效果
            animateFunc(document.getElementsByClassName('farris-doc-feature--content'), changeHeader,isLargeSize.value);
        }, 100)
    );

    // 窗口大小改变时
    window.addEventListener(
        'resize',
        throttleAndDebounce(() => {
            curSize.value = resizeWindow();
        }, 100)
    );
});

onMounted(() => {
    // 顶部导航
    changePageHeaderFixedState();
    changeFeatureCls(isLargeSize.value);
    curSize.value = resizeWindow();
    animateFunc(document.getElementsByClassName('farris-doc-feature--content'), changeHeader,isLargeSize.value);
});

const { frontmatter } = useData();
</script>

<template>
    <div class="Layout" :style="{'overflow':isSidebarOpen?'hidden':''}">
        <slot name="layout-top" />
        <VPSkipLink />
        <VPBackdrop class="backdrop" :show="isSidebarOpen" @click="closeSidebar" />
        <VPNav>
            <template #nav-bar-title-before><slot name="nav-bar-title-before" /></template>
            <template #nav-bar-title-after><slot name="nav-bar-title-after" /></template>
            <template #nav-bar-content-before><slot name="nav-bar-content-before" /></template>
            <template #nav-bar-content-after><slot name="nav-bar-content-after" /></template>
            <template #nav-screen-content-before><slot name="nav-screen-content-before" /></template>
            <template #nav-screen-content-after><slot name="nav-screen-content-after" /></template>
        </VPNav>
        <VPLocalNav :open="isSidebarOpen" @open-menu="openSidebar" />
        <VPSidebar :open="isSidebarOpen" >
            <template #sidebar-bg>
                <div class="farris-docs-nothome-bg"></div>
            </template>
        </VPSidebar>
        <VPContent>
            <template #home-hero-before><slot name="home-hero-before" /></template>
            <template #home-hero-after><slot name="home-hero-after" /></template>
            <template #home-features-before><slot name="home-features-before" /></template>
            <template #home-features-after><slot name="home-features-after" /></template>

            <template #doc-footer-before><slot name="doc-footer-before" /></template>
            <template #doc-before><slot name="doc-before" /></template>
            <template #doc-after><slot name="doc-after" /></template>

            <template #aside-top><slot name="aside-top" /></template>
            <template #aside-bottom><slot name="aside-bottom" /></template>
            <template #aside-outline-before><slot name="aside-outline-before" /></template>
            <template #aside-outline-after><slot name="aside-outline-after" /></template>
            <template #aside-ads-before><slot name="aside-ads-before" /></template>
            <template #aside-ads-after><slot name="aside-ads-after" /></template>
        </VPContent>
        <VPFooter />
        <slot name="layout-bottom" />
        <div class="farris-docs-nothome-bg" v-if="frontmatter.layout != 'home'"></div>
    </div>
</template>

<style scoped>
.Layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.farris-docs-nothome-bg {
    position: absolute;
    z-index: -1;
    opacity: 0.12;
    height: 389px;
    top: 0;
    left: 0;
    right: 0;
    background-image: linear-gradient(-2deg, rgba(71, 158, 255, 0) 5%, rgba(61, 150, 255, 0.59) 77%, #2a87ff 100%);
}
</style>
